var oUl = document.getElementById('wrapper').children[1].children[0];
var oInput = document.getElementsByTagName('input')[0];
var span = document.getElementsByTagName('span');
for (var i = 0; i < span.length; i++) {
  (function (_index) {
    span[_index].onclick = function () {
      for (var j = 0; j < span.length; j++) {
        span[j].className = 'btn';
      }
      span[_index].className = 'btn active';
      renderPage(filterBySex(arr, span[_index].innerText));
    };
  })(i);
}

function creatStore(config) {
  var state = config || {};
  var list = [];
  var newArr = [];
  return {
    getState: function (data) {
      console.log(state[data]);
    },
    setState: function (key, value) {
      state[key] = value;
      list.push(value);
    },
    subs: function () {
      list.forEach(function (item) {
        newArr = item();
      });
      renderPage(newArr);
    },
  };
}

oInput.oninput = function () {
  renderPage(filterByInputName(arr, this.value));
};
renderPage(arr);
var combineFilter = creatStore({
  sex: filterBySex,
  input: filterByInputName,
});
console.log(combineFilter);
